<template>
    <div class="qilin-QilinViewTest">
        <QilinView :viewConfig.sync="viewConfig">
            <template v-slot:custom="slotData">
                <span>{{slotData.data.data}}内容随便写哦！</span>
            </template>
        </QilinView>
    </div>
</template>

<script>
export default {
    data(){
        return {
            viewConfig:{
                globalConfig:{
                    isTable:true,
                    labelBackgroundColor:"#FAFAFA",
                    labelColor:"rgba(0,0,0,0.85)",
                    valueColor:"rgba(0,0,0,0.65)"
                },
                headerConfig:{
                    hideHeader:false,
                    headerText:""
                },
                itemConfig:[
                    {
                        label:"姓名",
                        value:"name",
                        type:"text",
                        col:8
                    },
                    {
                        label:"简介",
                        value:"description",
                        type:"text",
                        valueEllipsis:true,
                        col:16
                    },
                    {
                        label:"Qilin官网作者Qilin组件作者生平",
                        value:"detail",
                        type:"text",
                        labelEllipsis:true,
                        col:24
                    },
                    {
                        label:"生辰",
                        value:"birthday",
                        type:"date",
                        format:"chinese",
                        col:12
                    },
                    {
                        label:"Qilin官网",
                        value:"qilinWeb",
                        type:"link",
                        valueStyle:"color:red !important;",
                        click:(item,value)=>{
                            console.log(item,value);
                            window.open(value);
                        },
                        col:12
                    },
                    {
                        label:"作者图片1",
                        value:"imageArrayString",
                        type:"image",
                        isImageArrayString:true,
                        imageFit:"fill",
                        col:12
                    },
                    {
                        label:"作者图片2",
                        value:"imageArrayObj",
                        type:"image",
                        isImageArrayString:false,
                        imageFit:"fill",
                        col:12
                    },
                    {
                        label:"作者图片3",
                        value:"imageArrayObj2",
                        type:"image",
                        isImageArrayString:false,
                        imageFit:"fill",
                        imageOptions:{
                            serverUrl:"name"
                        },
                        col:24
                    },
                    {
                        label:"作者文档1",
                        value:"fileArrayString",
                        type:"file",
                        isImageArrayString:true,
                        click:(item,value)=>{
                            console.log(item,value);
                        },
                        col:24
                    },
                    {
                        label:"作者文档2",
                        value:"fileArrayObj",
                        type:"file",
                        isImageArrayString:false,
                        click:(item,value)=>{
                            console.log(item,value);
                        },
                        col:24
                    },
                    {
                        label:"作者文档3",
                        value:"fileArrayObj2",
                        type:"file",
                        isImageArrayString:false,
                        imageOptions:{
                            serverOriginalName:"name"
                        },
                        click:(item,value)=>{
                            console.log(item,value);
                        },
                        col:24
                    },
                    {
                        label:"插槽",
                        value:"custom",
                        type:"slot",
                        slotName:"custom",
                        col:24
                    },
                    {
                        label:"作者介绍",
                        value:"detail1",
                        type:"text",
                        textarea:true,
                        rows:3,
                        col:24
                    }
                ],
                viewData:{
                    name:"Qilin",
                    description:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
                    detail:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~",
                    birthday:"1996-05-12",
                    qilinWeb:"https://www.qilin-web.cn",
                    imageArrayString:["https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"],
                    imageArrayObj:[
                        {
                            fileName:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                        }
                    ],
                    imageArrayObj2:[
                        {
                            name:"https://www.qilin-web.cn/qilin/uploads/image_20230918151155.jpeg"
                        }
                    ],
                    fileArrayString:["dhadadjasdjafjak.doc","dhadadjasdjafjak1.doc"],
                    fileArrayObj:[
                        {
                            originalFilename:"dhadadjasdjafjak.doc"
                        }
                    ],
                    fileArrayObj2:[
                        {
                            name:"dhadadjasdjafjak.doc"
                        }
                    ],
                    custom:"作者的自定义插槽~",
                    detail1:"Qilin组件的创始者，前端插件的搬运工，Qilin工具库的封装者，Qilin官网的作者，尘世中一个迷途小前端~"
                }
            }
        }
    },
    methods:{

    },
    mounted(){

    }
}
</script>

<style lang="scss" scoped>

</style>
